<template>
    <div class="morelist" :style="{width:listwidth}">
        <div class="morelist_top">
          <div class="morelist_left">
              <h2>{{morelist[0].department_name}}</h2>
          </div>
          <div class="morelist_video">
              <div class="morelist_one" v-for="item in morelist" :key="item.id" @click="godetail(item.id)">
                  <div class="morelist_ooo"> 
                    <img :src="item.image" alt="">
                    <p>{{item.name}}</p>
                    <div class="rate_user">
                        <a-rate :default-value="item.grade" disabled  allow-half/>
                        <span>发布人：{{item.teacher_name}}</span>
                    </div>
                    <div class="detail">
                        <div class="bottom_left">
                            <span>{{item.add_time}}</span>
                        </div>
                        <div class="bottom_right">
                            <span><a-icon type="eye" />{{item.click_nums}}</span>
                            <span><a-icon type="like" />{{item.give_like_nums}}</span>
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="kkke" style="text-align:center;margin-bottom:20px">
            <a-pagination v-model="current" @change="currentpage2" showQuickJumper :pageSize="pageSize" size="small" :total="total" show-less-items />
      </div>
    </div>
</template>

<script>
import {getmorelistData} from '../../api'
export default {
    data() {
        return {
            current:1,
            pageSize:12,
            total:0,
            morelist:[
                {
                    id:'',
                    department_name:'',
                    teacher_name:'',
                    name:'',
                    grade:0,
                    image:'',
                    click_nums:'',
                    give_like_nums:'',
                    add_time:'',
                }
            ]
        }
    },
    watch: {
        '$route' (to, from) {
            if (to.query && from.query && to.query.area !== from.query.area) {
                this.current=1
                this.getmorelistttt()            
            }
        }
    },
    methods: {
        godetail(id){
            this.$router.push({path:'/videodetail',query:{id:id}})
        },
        getmorelistttt(){
            let department = this.$route.query.area
            let page = this.current
            let page_size = this.pageSize
            getmorelistData(department,page,page_size).then(res=>{
                this.morelist = res.results
                this.total = res.count
            })
        },
        currentpage2(val){
            this.current = val
            this.getmorelistttt()
        }
    },
    mounted(){
        this.getmorelistttt()
    },
    computed:{
        listwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang="less">
.morelist{
    margin: 0 auto;
    padding: 30px 0 30px 0;
    .morelist_top{
        .morelist_video{
            overflow: hidden;
            margin-bottom: 5vh;
            .morelist_one{
                width: 24%;
                float: left;
                margin: 1vh 1% 1vh 0;
                .morelist_ooo{
                    border: 1px solid gainsboro;
                    border-radius: 9px;
                    overflow: hidden;
                    background: white;
                }
                img{
                    width: 100%;
                    height: 168px;
                }
                p{
                    margin: 0.5vh 0 0.8vh 0;
                    font-size: 1vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding: 0 5px 0 5px;
                }
                .rate_user{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px 0 5px;
                    .ant-rate-star:not(:last-child){
                        width: 15px;
                    }
                    span{
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }
                .detail{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px 5px 5px;
                    .bottom_right{
                        span{
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
    }
}
</style>